class Magnifier{
	constructor(){
		this.leftBox = document.querySelector(".container .leftBox");
		this.rightBbox = document.querySelector(".container .rightBbox");
		this.span = document.querySelector(".container .leftBox span");
		this.rimg = document.querySelector(".container .rightBbox img");
        this.limg = document.querySelector(".container .leftBox img");
        this.li = document.querySelectorAll(".container .list li");
        this.addEvent();
	}
	addEvent(){
		var that = this;
		this.leftBox.onmouseover = function(){
			that.over();
		}
		this.leftBox.onmousemove = function(eve){
			var e = eve || window.event;
			that.move(e);
		}
		this.leftBox.onmouseout = function(){
			that.out();
		}
		for(var i=0;i<this.li.length;i++){
			this.li[i].onclick = function(){
				that.limg.src = this.children[0].src;
				that.rimg.src = this.children[0].src;
			}
		}
	}
	over(){
		this.span.style.display = "block";
		this.rightBbox.style.display = "block";
	}
	move(e){
		var l = e.pageX - this.leftBox.offsetLeft - this.span.offsetWidth/2;
		var t = e.pageY - this.leftBox.offsetTop - this.span.offsetHeight/2;
		if(l<0){l = 0;}
		if(t<0){t = 0;}
		if(l > this.leftBox.offsetWidth - this.span.offsetWidth){
			l = this.leftBox.offsetWidth - this.span.offsetWidth;
		}
		if(t > this.leftBox.offsetHeight - this.span.offsetHeight){
			t = this.leftBox.offsetHeight - this.span.offsetHeight;
		}
		this.span.style.left = l + "px";
		this.span.style.top = t + "px";
		//计算比例
		var x = l / (this.leftBox.offsetWidth - this.span.offsetWidth);
		var y = t / (this.leftBox.offsetHeight - this.span.offsetHeight);
		//大图的比例
		this.rimg.style.left = (this.rightBbox.offsetWidth - this.rimg.offsetWidth) * x + "px";
		this.rimg.style.top = (this.rightBbox.offsetHeight - this.rimg.offsetHeight) * y + "px";
	}
	out(){
		this.span.style.display = "none";
		this.rightBbox.style.display = "none";
	}
}
